<template>
  <div class="artist-album"
       v-if="musiclist.length!=0">
    <p>热门50首</p>
    <div class="hot50">
      <!-- 左边图片 -->
      <div class="left">
        <div class="icon">
          <img :src="musiclist[0].pic"
               alt="">
        </div>
      </div>
      <!-- 右边 -->
      <div class="right">
        <!-- 音乐列表 -->
        <div class="music"
             :class="{fold:fold}">
          <table cellspacing="0px">
            <tr v-for="(item,index) in musiclist"
                :key="index"
                :class="{backColor:setBackColor(index)}"
                @dblclick="PlayMusic(index)">
              <td :class="{currFont:playIndex===index}">
                {{setSerial(index)}}
                <div class="curPlay"
                     v-show="playIndex===index">
                  <img src="~assets/img/playmusic/currentplay.svg"
                       alt />
                </div>
              </td>
              <td>
                <img src="~assets/img/leftmenu/live.svg"
                     alt
                     class="live" />
                <img src="~assets/img/leftmenu/xiazai.svg"
                     alt
                     class="xiazai" />
              </td>
              <td>{{item.name}}</td>
              <td>{{item.album}}</td>
              <td>{{item.time}}</td>
            </tr>
          </table>
        </div>
        <!-- 折叠区域 -->
        <div class="toggle-fold"
             @click="fold=!fold">
          <span v-if="fold">查看全部50首</span>
          <span v-if="!fold">收起</span>
        </div>
      </div>
      <!-- 浮动会使元素脱标，在所有浮动元素后面加一个块状元素，并设置clear:both清除浮动造成的父元素高度撑不起来问题 -->
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
import { tableMixin } from 'mixin/tableMixin'
import { indexMixin } from 'mixin/indexMixin'
import { playMixin } from 'mixin/playMixin'
export default {
  name: 'ArtistHot50',
  props: {
    musiclist: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      fold: true
    }
  },
  mixins: [tableMixin, playMixin, indexMixin]
}
</script>

<style scoped>
.artist-album {
  width: 100%;
  color: #333;
  position: relative;
  padding:0px 0px 20px 0;
}
.left {
  width: 20%;
  float: left;
}
.icon {
  width: 100%;
}
.icon img {
  width: 80%;
}
.right {
  width: 75%;
  float: left;
  overflow: hidden;
}
.hot50 {
  width: 100%;
}
.music {
  height: 100%;
}
.music table {
  width: 100%;
  border: 1px solid #ddd;
}
.music tr {
  height: 30px;
  text-align: left;
  background-color: #fff;
}
.music tr:hover {
  background-color: #00aa85 !important;
  color: #fff;
}
.music tr td {
  /* position: relative; */
  padding-left: 10px;
}
.music tbody {
  font-size: 13px;
  color: #ccc;
}
.music tr td:nth-child(1) {
  width: 50px;
  text-align: center;
}
.music tr td:nth-child(2) {
  width: 80px;
}
.music tr td:nth-child(2) img {
  width: 20px;
  opacity: 0.6;
}
.music tr td .live {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.music tr td .xiazai {
  margin-left: 26px;
}
.music tr td:nth-child(6) {
  width: 180px;
}
.backColor {
  background: #f7f7f7 !important;
}
p {
  font-size: 20px;
  padding-bottom: 10px;
  color: #333;
}
.clear {
  clear: both;
}
.fold {
  height: 300px;
  overflow: hidden;
}
.toggle-fold {
  position: absolute;
  bottom:-4px;
  right: 55px;
}
.toggle-fold:hover {
  color: #00aa85;
}
</style>
